<template>
  <div id="main">
    <!-- <img src="@/assets/bg.jpg" @click="toFriendSpace" /> -->
    <!-- 若获取用户头像成功，就显示用户头像 -->
    <img v-if="header" :src="defaultImg[0]" alt="头像" @click="toFriendSpace" />
    <!-- 若获取用户头像失败，判断用户性别，显示默认头像 -->
    <img
      v-if="!header"
      @click="toFriendSpace"
      :src="this.friend.sex == 'boy' ? defaultImg[1] : defaultImg[2]"
      alt="头像"
    />
    <h2 @click="toFriendSpace">{{ friend.username }}</h2>
    <h4>{{ friend.description }}</h4>
    <p>
      {{ friend.nodeNum }}&nbsp;笔记&nbsp;&nbsp;·&nbsp;&nbsp;{{
        friend.followerNum
      }}&nbsp;关注者
    </p>
    <!-- 我的关注页面的按钮 -->
    <div
      class="button"
      v-if="subscriptionCopy"
      @mouseenter="changeAttention"
      @mouseleave="changeAttention"
      @click="notFollow"
    >
      {{ Attention }}
    </div>
    <!-- 我的粉丝页面的按钮 -->
    <div
      class="button"
      v-if="!subscriptionCopy"
      @mouseenter="changeFans"
      @mouseleave="changeFans"
      @click="follow"
    >
      {{ Fans }}
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
export default {
  props: ["friend", "subscription"],
  data() {
    return {
      // 头像是否获取成功标志位
      header: false,
      // 头像地址数组
      defaultImg: [
        "",
        require("@/assets/boyUser.jpg"),
        require("@/assets/girlUser.jpg"),
      ],
      // 显示 关注/取消关注 Or 未关注/关注 按钮的状态(由于需要改动父组件传递来的props属性，就复制一份来改动)
      subscriptionCopy: this.subscription,
      // 我的关注页面的按钮状态
      AttentionStatus: true,
      // 我的粉丝页面的按钮状态
      FansStatus: true,
    };
  },
  methods: {
    // 我的关注页面的按钮状态切换事件
    changeAttention() {
      this.AttentionStatus = !this.AttentionStatus;
    },
    // 我的粉丝页面的按钮状态切换事件
    changeFans() {
      this.FansStatus = !this.FansStatus;
    },
    // 点击头像或名字的跳转事件
    toFriendSpace() {
      let id = ""
      if(this.$route.path == "/main/friend/attention") id = this.friend.befollowerid
      if(this.$route.path == "/main/friend/fans") id = this.friend.followerid
      this.$router.push({
        path: "/main/myNode/lately",
        query: {
          id: id,
        },
      });
    },
    // 取消关注的按钮事件
    notFollow() {
      if (!confirm("确定取消关注该用户吗？")) return;
      this.$axios({
        method: "post",
        url: "http://localhost:8181/follow/notAttentionById/" + this.friend.id,
      }).then(
        (res) => {
          if (res.data) {
            // 刷新页面
            this.$router.go(0);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 关注按钮的点击事件
    follow() {
      // 发送请求，关注该用户
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/follow/attentionById/" +
          getCookie("userId") +
          "/" +
          this.friend.followerid,
      }).then(
        (res) => {
          if (res.data) {
            alert("关注成功！");
            // 刷新页面
            this.$router.go(0);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  computed: {
    // 控制我的关注页面的按钮内容
    Attention() {
      return this.AttentionStatus ? "已关注" : "取消关注";
    },
    // 控制我的粉丝页面的按钮内容
    Fans() {
      return this.FansStatus ? "未关注" : "关注";
    },
  },
  mounted() {
    // 判断关注状态是否从父组件中获取，若没有获取就查询数据库看是否关注(我的粉丝路由跳转过来就要查询，我的关注默认不用查询，因为已经关注了)
    if (!this.subscriptionCopy) {
      // 查询登录用户是否关注该用户(粉丝)
      this.$axios({
        method: "post",
        url:
          "http://localhost:8181/follow/whetherAttention/" +
          this.$route.query.id +
          "/" +
          this.friend.followerid,
      }).then(
        (res) => {
          // 若有返回关注关系，设置关注状态为true
          if (res.data) {
            this.subscriptionCopy = true;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    }
    // 查询该用户头像
    // 判断请求地址，若访问的是我的关注，就查询父组件传过来的被关注id的头像；若访问的是我的粉丝，就查询父组件传过来的关注id的头像
    let url = "";
    if (this.$route.path == "/main/friend/fans"){
      url = "http://localhost:8181/user/header/" +this.friend.followerid;
    } 
    if (this.$route.path == "/main/friend/attention"){
      url = "http://localhost:8181/user/header/" +this.friend.befollowerid;
    }
    //  读取用户头像
    this.$axios({
      method: "get",
      url: url,
    }).then(
      (res) => {
        // 若头像获取成功
        if (res.data != false) {
          // 换头像
          this.defaultImg[0] = url
          // 换头像标志位状态
          this.header = true;
        }
        // 头像获取失败，使用默认头像
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
#main {
  position: relative;
}
img {
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 20%;
  cursor: pointer;
  margin: 5px 20px;
}

h2 {
  color: #fff;
  display: inline-block;
  line-height: 40px;
  cursor: pointer;
  height: 40px;
  width: 400px;
  position: absolute;
}
h4 {
  display: inline-block;
  position: absolute;
  top: 40px;
  color: #fff;
  font-size: small;
}
p {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  color: #fff;
}
.button {
  display: inline-block;
  position: absolute;
  height: 50px;
  width: 100px;
  right: 40px;
  top: 25px;
  color: #fff;
  /* background-color: rgb(100, 100, 100); */
  border: solid 0.5px #55556d;
  line-height: 50px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}
</style>